<template>

<Poptip :width="260" placement='left' v-model="visibal">
    
    <Button @click='clickFn' size='small' :disabled='disabled'>
        分配
    </Button>

    <div slot='content' class="single-poptip-content">
        <h1 class="title">
            请选择单证号
        </h1>
        <Table :data='data' :show-header='false' :columns='columns' highlight-row  @on-current-change='select'></Table>
    </div>
    
</Poptip>

</template>

<script lang='ts'>
import {Component, Watch, Prop, Vue} from 'vue-property-decorator'

@Component({})
export default class proptip extends Vue{
    name:string = 'proptip'
    
    @Prop()
    disabled:boolean
    
    @Prop()
    clickFn

    @Prop()
    data

    columns = [

        // {
        //     title: '#',
        //     type: 'index',
        //     width: 60,
        // },
        
        {   
            title: '单证号',
            key: 'singleId',
            align: 'center'
        }
        
    ]
    
 
    visibal:boolean = false;
    
    visibalSwitch (type?:boolean){
        this.visibal = type === undefined ? !this.visibal : type;
    }

    // 抛出选中数据
    select(currentRow, oldRow){
        this.$emit('select', currentRow)
        this.visibalSwitch()
    }

    created(){
        // 抛出开关函数
        this.$emit('visibalSwitch', this.visibalSwitch)
    }
   

}

</script>

<style lang='scss'>

.single-poptip-content{

    .title{
        padding: _rem(6px) 0;
        
        font-size: $font_md;
        font-weight: 400;
        text-align: center;
        
        border-radius: $border_radius;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: $main_color;
        color: $font_light_color;
    }

    .ivu-table-row-highlight div{
        color: $font_light_color;
    }
    
}

</style>